<template>
  <el-descriptions :column="2" border>
    <el-descriptions-item label="请求地址">{{ form.action }}</el-descriptions-item>
    <el-descriptions-item label="请求方式">{{ form.method }}</el-descriptions-item>
    <el-descriptions-item label="请求状态">
      <el-tag v-if="form.status" type="success">成功</el-tag>
      <el-tag v-if="!form.status" type="danger">失败</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="业务类型">
      <el-tag v-if="form.type === 'ADD'" type="primary">新增</el-tag>
      <el-tag v-if="form.type === 'DEL'" type="danger">删除</el-tag>
      <el-tag v-if="form.type === 'EDIT'" type="warning">修改</el-tag>
      <el-tag v-if="form.type === 'QUERY'" type="success">查询</el-tag>
      <el-tag v-if="form.type === 'OTHER'" type="info">其他</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="请求发起人">{{ form.userName }}</el-descriptions-item>
    <el-descriptions-item label="请求耗时">{{ form.duration }}（ms）</el-descriptions-item>
    <el-descriptions-item label="请求处理模块">{{ form.module }}</el-descriptions-item>
    <el-descriptions-item label="请求处理方法">{{ form.handle }}</el-descriptions-item>
    <el-descriptions-item label="请求人IP">{{ form.address }}</el-descriptions-item>
    <el-descriptions-item label="IP归属地">{{ form.location }}</el-descriptions-item>
    <el-descriptions-item label="请求浏览器">{{ form.browser }}</el-descriptions-item>
    <el-descriptions-item label="请求操作系统">{{ form.system }}</el-descriptions-item>
    <el-descriptions-item label="请求发起时间">{{ form.createTime }}</el-descriptions-item>
    <el-descriptions-item label="备注">{{ form.remark }}</el-descriptions-item>
  </el-descriptions>
  <el-form style="margin-top: 20px;" label-width="100px" ref="formRef" :model="form">
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="form.remark" clearable placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="js">
import {ref} from "vue";

const formRef = ref();
const props = defineProps({
  form: {
    type: Object,
    default: {}
  }
})
const getFormRef = () => {
  return formRef.value;
}

defineExpose({getFormRef});
</script>
